<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element元素节点方法</title>
</head>

<body>
    <script>
        // 属性
        // Element.id属性返回指定元素的id属性，该属性可读写
        // className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割
        // Element.classList
        // classList对象有下列方法
        // add()：增加一个 class。
        // remove()：移除一个 class。
        // contains()：检查当前元素是否包含某个 class。
        // toggle()：将某个 class 移入或移出当前元素
        // Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素
        // 使用
        // var p = document.querySelector('p');
        // p.id // "foo"
        // div.classList.add('myCssClass');
        // div.innerHTML = '';

        // 元素节点获取元素位置
        // clientHeight	获取元素高度包括padding部分，但是不包括border、margin
        // clientWidth	获取元素宽度包括padding部分，但是不包括border、margin
        // clientLeft	元素节点左边框（left border）的宽度
        // clientTop	元素节点上边框（top border）的高度
        // scrollHeight	元素总高度，它包括padding，但是不包括border、margin包括溢出的不可见内容
        // scrollWidth	元素总宽度，它包括padding，但是不包括border、margin包括溢出的不可见内容
        // scrollLeft	元素的水平滚动条向右滚动的像素数量
        // scrollTop	元素的垂直滚动条向下滚动的像素数量
        // offsetHeight	元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
        // offsetWidth	元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
        // offsetLeft	到定位父级左边界的间距
        // offsetTop	到定位父级上边界的间距
        console.log(document.documentElement.clientHeight);


        // 方法
        // Element.focus方法用于将当前页面的焦点，转移到指定元素上
        // Element.blur方法用于将焦点从当前元素移除
        // Element.remove方法用于将当前元素节点从它的父节点移除
        // Element.getBoundingClientRect方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息
        // x：元素左上角相对于视口的横坐标
        // y：元素左上角相对于视口的纵坐标
        // height：元素高度
        // width：元素宽度
        // left：元素左上角相对于视口的横坐标，与x属性相等
        // right：元素右边界相对于视口的横坐标（等于x + width）
        // top：元素顶部相对于视口的纵坐标，与y属性相等
        // bottom：元素底部相对于视口的纵坐标（等于y + height）
        var el = document.getElementById('mydiv');
        el.remove();
    </script>
</body>

</html>